function YonghuModal(){
    this.createDom();
	this.addListener();
}

YonghuModal.template=`<!-- 分类页面 -->
<div style="border:1px solid #e5e5e5; margin-left:350px;margin-top:100px;" class="hide" id="box6">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" style="margin-left: 100px; margin-top: 20px;">
    <li role="presentation" class="active"><a href="#xxxa" aria-controls="xxxa" role="tab" data-toggle="tab">查看用户</a></li>
    <li role="presentation"><a href="#xxxb" aria-controls="xxxb" role="tab" data-toggle="tab">添加用户</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="xxxa">
      <table class="table table-bordered .active">
          <tr class="active">
              <td>编号</td>
              <td>用户名</td>
              <td>姓名</td>
              <td>性别</td>
              <td>编辑</td>
              <td>删除</td>
          </tr>
        </table>
    </div>
    <div role="tabpanel" class="tab-pane" id="xxxb">

      <form class="form-horizontal" style="margin-top: 30px;">
         <div class="form-group">
        <label for="xxc" class="col-sm-2 control-label">商品名称</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="xxxc" style="width:443px;" placeholder="商品名称">
        </div>
      </div>
    <div class="form-group">
                <label for="xxxd" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="xxxd" style="width:443px;" placeholder="用户名">
                </div>
            </div>
    <div class="form-group">
            <label for="xxxd" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
            <input type="radio"name="ral" id="yy"/>男
            <input type="radio" name="ral" id="xx"/>女
            </div>
        </div>    
        <div class="form-group">
        <label for="xxxe" class="col-sm-2 control-label">联系电话</label>
        <div class="col-sm-10">
        <input type="text" class="form-control" id="xxxe" style="width:443px;" placeholder="联系电话">
        </div>
    </div>
           
        <div class="form-group">
        <label for="xxxg" class="col-sm-2 control-label">籍贯</label>
        <div class="col-sm-10">
        <input type="text" class="form-control" id="xxxg" style="width:443px;" placeholder="籍贯">
        </div>
    </div>

               
            <div class="form-group">
            <label for="xxxh" class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
            <input type="email" class="form-control" id="xxxh" style="width:443px;" placeholder="电子邮件">
            </div>
        </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">备注</label>
            <div class="col-sm-10">
             <textarea name="xxxw" id="xxxw" cols="60" rows="10"></textarea>
            </div>
          </div>
          <div class="form-group" >
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default" style="background: #438EB9; color: white;">添加用户</button>
            </div>
          </div>
        </form>
    </div>
    
  </div>

</div>`;

$.extend(YonghuModal.prototype, {
	// 创建DOM元素并渲染
	createDom() {
		$(YonghuModal.template).appendTo("body");
	},
	// 注册事件监听
	addListener() {
		
        $("#yonghu").on("click", this.yonghuHandler);
        // $('#myTabs a').click(function (e) {
        //     e.preventDefault()
        //     $(this).tab('show')
        //   });
        //   $('#myTabs a[href="#profile"]').tab('show') ;// Select tab by name
        //   $('#myTabs a:first').tab('show'); // Select first tab
	},
	// 登录业务处理
	yonghuHandler() {
        
        $("#box6").removeClass("hide");
        $("#box1").hide();
        $("#box6").show();
        $("#box3").hide();
        $("#box2").hide();
        $("#box4").hide();
        $("#box5").hide();
        $("#box7").hide();
	}
}); 

new YonghuModal();